<template>
	<div class="main">
		<div class="top">
			<div style="height: 100%; width: 15%; text-align: center;line-height: 150%; font-size: 40px; color: #fff;cursor:pointer"
				@click="toHome">蓝竹云</div>
		</div>
		<div class="left-box">
			<el-menu :default-active="hindex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				v-for="(item,index) in docList" :key="index">
				<el-submenu index=index>
					<template slot="title">
						<span>{{item.title}}</span>
					</template>
					<el-menu-item :index="item.subtitle"
						@click="getContent(item.subtitle,index,item.content,item.updateTime,item.author)"
						style="overflow: hidden;">{{item.subtitle}}</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
		<div class="hepl_right-box">
			<div class="d_title">{{title}}</div>
			<div v-html="test" style="margin-bottom: 100px;"></div>
			<div style="position: absolute;right: 0;">
				<div style="text-align: right;margin-bottom: 40px;">{{uptime}}</div>
			</div>
		</div>

	</div>
</template>

<script scoped>
	import axios, {
		Axios
	} from 'axios';
	import {
		getDocurl,
	} from '../../api/work.js'
	export default {
		data() {
			return {
				title: '欢迎来到蓝竹云文档',
				hindex: '',
				test: '在这里，您可以解决您对蓝竹云的所有疑问。蓝竹云帮助文档将会帮助您彻底掌握蓝竹云',
				uptime: '',
				docList: [],
			}
		},
		methods: {

			toHome() {
				this.$router.push('/demo/index')
			},
			getContent(title, index, data, time, name) {
				this.title = title
				this.hindex = index
				this.test = data
				this.uptime = time
				this.uploader = name
			},

			//获取文档
			getDoc() {
				getDocurl().then(res => {
					this.docList = res
					this.uploader = res.author
					this.uptime = res.updateTime
				})
			},
		},
		mounted() {
			this.getDoc()
		}
	}
</script>

<style scoped>
	.main {
		position: absolute;
		width: 100%;
		height: auto;
		background-color: #171717;
	}

	.top {
		position: fixed;
		z-index: 2;
		width: 100%;
		height: 40px;
		background-color: #171717;
		border-bottom: 1px solid black;
	}

	.d_title {
		margin: 120px 0 40px;
		font-size: 45px;
		font-weight: 700;
	}

	.catalog {
		line-height: 35px;
		padding-left: 5%;
		height: 35px;
		border: 1px solid black;
	}

	.left-box {
		position: fixed;
		background-color: #171717;
		color: #fff;
		top: 6%;
		width: 15%;
		height: 100%;
		cursor: pointer;
		border: none;
		top: 50px;
		width: 15%;
		height: 100%;

	}


	.hepl_right-box {
		position: relative;
		left: 20%;
		width: 60%;
		height: 100vmin;
		overflow-y: auto;
	}

	.bottom {
		margin: 30px 0;
		height: 9%;
		width: 50%;
	}

	.btn {
		background-color: #fff;
		border: 1px solid #d5d5d5;
		border-radius: 10px;

		width: 45%;
		height: 80%;
	}

	.hepl_right-box div {
		background-color: #171717;
		color: #fff;
	}

	.el-menu-item {
		background-color: #171717;
		color: #fff;
	}

	.el-submenu.is-active .el-submenu__title {
		color: #fff;
	}

	.el-menu {
		background-color: #171717 !important;
	}

	.el-submenu__title span {
		color: #fff;
	}


	/deep/ .el-submenu__title:hover {
		background-color: #171717 !important;
	}


	.el-menu-item.is-active {
		width: 100%;
		background-color: #4a4a4a;
	}

	.el-submenu .el-menu-item {
		min-width: 100px;
	}
</style>